<script setup lang="ts">
const emits = defineEmits<{
  (e: 'search'): void
  (e: 'add'): void
}>()

const query: {
  scheduleSchemeName?: string
  shiftUnitName?: string
  teamName?: string
} = reactive({
  scheduleSchemeName: '',
  shiftUnitName: '',
  teamName: '',
})

const router = useRouter()
function click2plan() {
  router.push({
    path: '/rostering-plan',
  })
}

defineExpose({
  query,
})
</script>

<template>
  <ElForm inline :model="query">
    <ElFormItem label="排班方案" prop="scheduleSchemeName">
      <ElInput
        v-model="query.scheduleSchemeName"
        clearable
      />
    </ElFormItem>
    <ElFormItem label="班次单元" prop="shiftUnitName">
      <ElInput
        v-model="query.shiftUnitName"
        clearable
      />
    </ElFormItem>
    <ElFormItem label="班组名称" prop="teamName">
      <ElInput
        v-model="query.teamName"
        clearable
      />
    </ElFormItem>
    <ElFormItem>
      <SearchButton @click="emits('search')" />
      <ElButton type="warning" @click="click2plan">
        查看排班计划
      </ElButton>
      <AddButton @click="emits('add')" />
    </ElFormItem>
  </ElForm>
</template>
